<!doctype html>
<html class="cards polymer-ui-full-bleed">
<head>
  <title>Playing Cards with Polymer</title>
  <script src="polymer/polymer.js"></script>  
  <link rel="stylesheet" href="polymer-ui-elements/basic.css">
  <link rel="import" href="deck-element.html">
  <link rel="import" href="hand-element.html">
  <style>
  card-card {
    height:400px;
    width:288px;
    font-size:20px;
  }
    body {
    overflow-y:auto;font-family:Arial,sans-serif;
    }
    #hand {
    padding: 50px;
    margin-left:100px;
    }
    #gametable {
    padding: 50px;
    background-color: #3a3;
    }
    #discards {
    position: absolute; top: 50px; left: 300px; width:400px;
    }
  </style>
</head>
<body class="polymer-ui-full-bleed">
  <div id="controls">
  <button onclick="flipall()">Flip All</button>
  <button onclick="reverse()">Reverse</button>
  <button onclick="deal()">Deal</button>
  <button onclick="shuffle()">Shuffle</button>
  <button onclick="newDeck()">New Deck</button>
  <button onclick="draw()">Draw</button>
  </div>
  <div id="gametable" class="polymer-ui-full-bleed">
  <card-deck id="deck" onmouseup="draw()"></card-deck>
  <card-deck id="discards"></card-deck>
  <card-hand id="hand"></card-hand>
  </div>
<script>
var suits = ['diamonds', 'clubs', 'spades', 'hearts'];

var hand = document.getElementById('hand');
var deck = document.getElementById('deck');
var discards = document.getElementById('discards');

function flipall() {
  hand.cards.map(function(card){card.faceup = !card.faceup;});
}

function reverse() {
  hand.cards.reverse();
}

function randomSuit() {
  var i = Math.round(Math.random() * 3);
  return suits[i];
}

function randomVal() {
  return Math.floor(Math.random() * 13) + 1;
}

function deal() {
  discards.cards = discards.cards.concat(hand.cards);
  hand.cards = deck.dealHand(5);
}

function draw() {
  hand.cards.push(deck.drawCard());
}

function shuffle() {
  deck.shuffle();
}

function newDeck() {
  deck.reset();
}

document.addEventListener('WebComponentsReady', function() {
  document.removeEventListener('WebComponentsReady');
  discards.dealHand(52);
});
</script>
</body>
</html>
